<template>
  <el-form inline size="small">
    <el-form-item label="学年" v-if="showYear"
      ><el-radio-group v-model="yearValue"
        ><el-radio-button
          v-for="year in 4"
          :key="year"
          :label="new Date().getFullYear() - year + 1"
          >{{ new Date().getFullYear() - year + 1 }}</el-radio-button
        >
      </el-radio-group></el-form-item
    >
    <el-form-item label="学期"
      ><el-radio-group v-model="termValue"
        ><el-radio-button
          v-for="term in termData"
          :key="term.value"
          :label="term.value"
          >{{ term.label }}</el-radio-button
        ></el-radio-group
      ></el-form-item
    >
    <el-form-item label="学校">
      <avue-input-tree
        ref="schoolTree"
        v-model="schoolTreeId"
        class="my-tree"
        :dic="schoolTreeData"
        :props="{ label: 'schoolName', value: 'id'}"
    /></el-form-item>
    <el-form-item label="班级">
      <avue-input-tree
        ref="clazzTree"
        v-model="clazzTreeId"
        class="my-tree"
        :dic="clazzTreeData"
        :props="{ label: 'clazzName', value: 'id' }"
    /></el-form-item>
    <el-form-item label="学生">
      <avue-input-tree
        ref="studentTree"
        v-model="studentId"
        class="my-tree"
        :dic="studentData"
        :props="{ label: 'studentName', value: 'studentId'}"
    /></el-form-item>
  </el-form>
</template>
<script>
import { treeSchoolList } from "@/views/data/school/api";
import { treeClazzList } from "@/views/data/clazz/api";
import { fetchList } from "@/views/data/student/api";
import { mapState } from "vuex";
import { validatenull } from "@/util/validate";
export default {
  name: "zpGlobalVariants",
  data() {
    return {
      schoolTreeData: [],
      clazzTreeData: [],
      studentData: [],
    };
  },
  computed: {
    ...mapState({
      showYear: (state) => state.common.showYear || false,
      termData: (state) => dict.school_term || [],
      homePage: (state) => state.common.homePage,
    }),
    termValue: {
      set(val) {
        // console.log(">>>> termValue",val,this.termValue)
        const {label,value} = this.termData.filter(t=> t.value === val)[0]||{};
        this.$store.commit("SET_HOMEPAGE", {termValue: value,termName:label});
        // console.log("<<<< termValue",val)
      },
      get() {
        return this.homePage.termValue;
      },
    },
    yearValue: {
      set(val) {
        // console.log(">>>> yearValue",val,this.yearValue)
        // 加载学校，学校里的班数统计与学年有关
        treeSchoolList({year:val}).then(respone =>{
          this.schoolTreeData = respone.data;
          if(!this.homePage.schoolId) {
            this.$store.commit("SET_HOMEPAGE", {yearValue: val});
            // console.log("1<<<< yearValue",val,this.yearValue)
            return;
          }
          // 加载班级,转变(对应常年的)班级
          treeClazzList({schoolId:this.homePage.schoolId,year:val}).then(respone =>{ 
            this.clazzTreeData = respone.data          
            let { clazzGrade,clazzId,clazzName,clazzRootId, id} = this.findNode(this.clazzTreeData,node=>{
              if(this.homePage.clazzRootId) return this.homePage.clazzRootId === node.clazzRootId;
              else if(this.homePage.clazzGrade) return this.homePage.clazzGrade ===node.clazzGrade;
              return false;
            }) || {};
            // 存在班级
            if(clazzId){
              this.$store.commit("SET_HOMEPAGE", {yearValue: val,clazzGrade,clazzId,clazzName,clazzRootId,clazzTreeId: id});
              // console.log("2<<<< yearValue",val,this.yearValue);
              return;
            }
            this.studentData = []
            this.$store.commit("SET_HOMEPAGE", {yearValue: val,clazzGrade,clazzId,clazzName,clazzRootId,clazzTreeId: id,studentId:undefined});
            // console.log("3<<<< yearValue",val,this.yearValue);
            return;
          });
        });
      },
      get() {
        return this.homePage.yearValue || new Date().getFullYear();
      },
    },
    schoolTreeId: {
      set(val) {
        if(validatenull(val) || validatenull(this.schoolTreeData) ) return;
        // console.log("0>>>> schoolTreeId",val,this.schoolTreeId)
        const {schoolCode,schoolName,schoolCity,schoolArea} = this.findNode(this.schoolTreeData,(node) => node.id === val) || {};  
        // 仅选择省市县
        if(!schoolCode){
          // 清空班级与学生列表,及选定值
          let {clazzGrade,clazzId,clazzName,clazzRootId,clazzTreeId,studentId} = {};
          this.studentData=[];
          this.clazzTreeData = [];
          this.$store.commit("SET_HOMEPAGE", {schoolTreeId:val,schoolId:undefined,schoolName:undefined,schoolCity,schoolArea,clazzGrade,clazzId,clazzName,clazzRootId,clazzTreeId,studentId}); 
          // console.log("1<<<< schoolTreeId",val)
          return ;
        }
        // 加载班级
        treeClazzList({schoolId:schoolCode,year:this.yearValue}).then(respone =>{
          this.clazzTreeData = respone.data
          if(this.schoolTreeId === val ){
            this.$store.commit("SET_HOMEPAGE", {schoolTreeId:val,schoolId:schoolCode,schoolName,schoolCity,schoolArea}); 
            // console.log("2<<<< schoolTreeId",val)
            return;
          }
          // 处理学校变动
          let {clazzGrade,clazzId,clazzName,clazzRootId,clazzTreeId,studentId} = {};
          this.studentData=[];
          this.$store.commit("SET_HOMEPAGE", {schoolTreeId:val,schoolId:schoolCode,schoolName,schoolCity,schoolArea,clazzGrade,clazzId,clazzName,clazzRootId,clazzTreeId,studentId}); 
          // console.log("3<<<< schoolTreeId",val)
        });  
      },
      get() {
        return this.homePage.schoolTreeId;
      },
    },
    clazzTreeId: {
      set(val) {
        if(validatenull(val) || validatenull(this.clazzTreeData) ){  
          // console.log("忽略clazzTreeId",val,this.clazzTreeData);
          return;
        }
        // console.log("0>>>> clazzTreeId",val,this.clazzTreeId)
        const {clazzGrade,clazzId,clazzRootId,clazzName} = this.findNode(this.clazzTreeData,(node) => node.id === val) || {};  
        // 选择 年级
        if(!clazzId) {
          this.studentData=[];
          this.$store.commit("SET_HOMEPAGE", {clazzGrade,clazzId,clazzRootId,clazzName,clazzTreeId:val,studentId:undefined}); 
          // console.log("1<<<< clazzTreeId",val)
          return;
        }
        // 选择 班级
        fetchList({studentClazz: clazzId, pageSize: 999999}).then(respone =>{
          this.studentData = respone.data.data.records
          const student = this.findNode(this.studentData,(node) => node.studentId === this.studentId) ; 
          if(student){ 
            this.$store.commit("SET_HOMEPAGE", {clazzGrade,clazzId,clazzRootId,clazzName,clazzTreeId:val}); 
            // console.log("2<<<< clazzTreeId",val);
            return ;
          }
          this.$store.commit("SET_HOMEPAGE", {clazzGrade,clazzId,clazzRootId,clazzName,clazzTreeId:val,studentId:undefined}); 
          // console.log("3<<<< clazzTreeId",val)
        });
      },
      get() {
        return this.homePage.clazzTreeId;
      },
    },
    studentId: {
      set(val) {              
        if(validatenull(val) || validatenull(this.studentData) ){
        //  console.log("忽略studentId",val,this.studentData);
         return;
        }
        // console.log(">>>> studentId",val,this.studentId)
        this.$store.commit("SET_HOMEPAGE", {studentId: val });          
        // console.log("<<<< studentId",val)
      },
      get() {
        return this.homePage.studentId;
      },
    },
  },
  mounted(){
    this.init();
  },
  methods: {
     init(){
      this.$nextTick(()=>{
        const {yearValue,schoolId,clazzId}=this.homePage;
        if(yearValue) treeSchoolList({year:yearValue}).then(resp=>this.schoolTreeData=resp.data);
        if(schoolId && yearValue) treeClazzList({schoolId:schoolId,year:yearValue}).then(resp=>this.clazzTreeData=resp.data);
        if(clazzId) fetchList({studentClazz: clazzId, pageSize: 999999}).then(resp=>this.studentData=resp.data.data.records);
      });
    },
    // filterSchoolMethod(value, data) {
    //   console.log('filterSchoolMethod',keyword);
    //   let { schoolName, schoolPinyin } = node.data;
    //   if (schoolPinyin) return schoolPinyin.indexOf(keyword) > -1;
    //   else if (schoolName) return schoolName.indexOf(keyword) > -1;
    //   return false;
    // },  
    // filterClazzMethod(value, data) {
    //   console.log('filterClazzMethod',keyword);
    //   let { schoolName, schoolPinyin } = node.data;
    //   if (schoolPinyin) return schoolPinyin.indexOf(keyword) > -1;
    //   else if (schoolName) return schoolName.indexOf(keyword) > -1;
    //   return false;
    // },  
    // filterStudentMethod(value, data) {
    //   console.log('filterStudentMethod',keyword);
    //   let { schoolName, schoolPinyin } = node.data;
    //   if (schoolPinyin) return schoolPinyin.indexOf(keyword) > -1;
    //   else if (schoolName) return schoolName.indexOf(keyword) > -1;
    //   return false;
    // },  
    findNode(treeNodes, filter) {
      if (!treeNodes) return treeNodes;
      for (var i = 0; i < treeNodes.length; i++) {
        let node = treeNodes[i];
        if (filter(node)) {
          return node;
        } else if (node.children) {
          node = this.findNode(node.children, filter);
          if (node) {
            return node;
          }
        }
      }
      return null;
    },
  },
};
</script>
<style lang="css" scoped>
.my-tree >>> input.el-input__inner {
  width: 300px !important;
}
</style>
